日常 Vue.js 笔记

发表于 | 更新于 | 分类于

前端框架。学习笔记。

npm 和 cnpm 和 项目初始化

https://www.runoob.com/vue2/vue-install.html

Vue 中的报错

vue的eslint报错的解决方法 在config目录下的index.js文件中将useEslint: true,改为useEslint: false,即可：

conf 目录

index.js 详解

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
dev: {
    //生成source-map与源码对应 方便调试
    devtool: 'cheap-source-map',
    // 如果部署一级目录(vue-admin.com)就写 / 如果二级目录（http://david.com/vue-admin）就写 /vue-admin
    assetsPublicPath: '/Home/',
    //跨域代理
      proxyTable: {
          '/': {
              target: 'https://26.innfotech.com/',
              secure: false,
              changeOrigin: true,
              pathRewrite: {
                  '^/': '/'
              }
          }
      },
    // Paths
    assetsSubDirectory: 'static',
    // 开发 服务器配置
    host: 'localhost', // ip
    port: 3030, //端口
    autoOpenBrowser: true,
    errorOverlay: true,
    notifyOnErrors: false,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
    // 是否开启eslint代码检查
    useEslint: false,
    // 是否将eslint错误显示在错误提示中
    showEslintErrorsInOverlay: false,
    // 是否生成cssSourcemap
    cssSourceMap: false
  },

build: {
    // 生成独立的source-map
    devtool: 'source-map',
    // 如果部署一级目录(vue-admin.com)就写 / 如果二级目录（http://david.com/vue/ /vue/
    assetsPublicPath: '/Home/',
    // 打包输出目录
    assetsRoot: path.resolve(__dirname, '../../Home'),
    // Template for index.html
    index: path.resolve(__dirname, '../../Home/index.html'),
    assetsSubDirectory: 'static',
    //生产环境不生成sourcemap
    productionSourceMap: false,

    // 是否开启 Gzip
    // 打开前 先安装：
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report || false,

    // `npm run build:prod --generate_report`
    generateAnalyzerReport: process.env.npm_config_generate_report || false
  }

指令

v-bind:class 下面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive

1
<div v-bind:class="{ active: isActive }"></div>

new Vue()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
data: function() {
       return {
           msg: 'cursor: pointer',
           number: '',
       }
   },
// 加载完后自动触发的方法
   created: function() {
       console.log('created', Date.now());
   },
   // 计算属性
   computed: {
       number: function() {
           return this.msg;
       }
   },
   // 侦听器
   watch: {
       msg: function(newMsg, oldMsg) {
           console.log(newMsg, oldMsg);
       }
   }

其他

存储localStorage

1
window.localStorage.setItem(name, content);

常用的组件

axios ajax
toast 提示层 动画
element-ui